<template>
  <div class="page-hero" v-if="model">
    <!-- 顶部条 -->
    <div class="topbar bg-black py-2 px-3 d-flex ai-center">
      <img src="../assets/images/logo.png" height="30px" alt />
      <div class="px-2">
        <div class="text-white ml-3">王者荣耀</div>
        <div class="text-grey ml-3 fs-xxs">团队成就更多</div>
      </div>
      <div class="text-grey pl-3 flex-1">攻略站</div>
      <router-link to="/" class="text-white" tag="div">更多英雄 ></router-link>
    </div>
    <!-- 背景图及其他 -->
    <div class="top d-flex flex-colum jc-end" :style="{'background-image':`url(${model.banner})`}">
      <div class="info text-white p-3">
        <div>{{model.title}}</div>
        <h3 class="fw-2">{{model.name}}</h3>
        <div>{{model.categories.map(v => v.name).join('/')}}</div>
        <div class="d-flex jc-between">
          <div class="scores d-flex text-center" v-if="model.scores">
            <span>难度</span>
            <span class="badge bg-primary">{{model.scores.difficult}}</span>
            <span>技能</span>
            <span class="badge bg-blue">{{model.scores.skills}}</span>
            <span>攻击</span>
            <span class="badge bg-red">{{model.scores.attack}}</span>
            <span>生存</span>
            <span class="badge bg-grey">{{model.scores.survive}}</span>
          </div>
          <router-link to="/" tag="span" class="text-grey">皮肤：2 &gt;</router-link>
        </div>
      </div>
    </div>
    <!-- 滑动卡片 -->
    <div class>
      <!-- 卡片导航 -->
      <div class="px-3 nav bg-white d-flex p-3 jc-around bb">
        <div class="nav-item">
          <div class="item-link" :class="{active: active === 0}"
        @click="$refs.list.swiper.slideTo(0)" >英雄初识</div>
        </div>
        <div class="nav-item">
          <div class="item-link" :class="{active: active === 1}"
        @click="$refs.list.swiper.slideTo(1)">进阶攻略</div>
        </div>
      </div>
      <!-- swiper -->
      <swiper ref="list" :options="{autoHeight:true}"  @slide-change="() => active=$refs.list.swiper.realIndex">
        <!-- 英雄初始 -->
        <swiperslide >
          <!-- 第一部分 -->
          <div class="px-3 bg-white">
            <!--按钮 -->
            <div class="pt-2">
              <div class="d-flex jc-around py-2">
                <router-link tag="button" class="anniu" to="/">
                  <i class="iconfont icon-menu"></i>
                  <span>英雄介绍视频</span>
                </router-link>
                <router-link tag="button" class="anniu" to="/">
                  <i class="iconfont icon-menu"></i>
                  <span>一图识英雄</span>
                </router-link>
              </div>
            </div>
            <!-- 技能 -->
            <div class="skills mt-3">
              <div class="d-flex jc-around">
                <img
                  class="icon"
                  :class="{active: currentSkillsIndex=== i}"
                  :src="item.icon"
                  @click="currentSkillsIndex = i"
                  v-for="(item,i) in model.skills"
                  width="60"
                  heigtt="60"
                  :key="i"
                  alt
                />
              </div>
              <div v-if="currentSkill">
                <!-- {{currentSkill}} -->
                <div class="d-flex ai-center">
                  <h3>{{currentSkill.name}}</h3>
                  <span
                    class="ml-4 text-grey"
                  >(冷却值: {{currentSkill.delay}} 消耗值: {{currentSkill.cost}} )</span>
                  <!-- <span> {{currentSkill.description}} </span> -->
                </div>
                <p style="margin-top:-1rem">{{currentSkill.description}}</p>
              </div>
            </div>
          </div>
          <!-- 第二部分 -->
          <m-card icon="menu" title="出装推荐" class="equipment">
            <span>顺风出装</span>
            <div class="d-flex jc-around text-center fs-sm">
              <div v-for="(item,i) in model.items1" :key="i">
                <img :src="item.icon" alt />
                <div>{{item.name}}</div>
              </div>
            </div>

            <span class="pt-3">逆风出装</span>
            <div class="d-flex jc-around text-center fs-sm">
              <div v-for="(item,i) in model.items2" :key="i">
                <img :src="item.icon" alt />
                <div>{{item.name}}</div>
              </div>
            </div>
          </m-card>

          <m-card icon="menu" title="铭文推荐">
            <div class="d-flex ai-center mb-2" v-for="item in model.mingwen" :key="item._id">
              <img :src="item.icon" alt />
              <div class="ml-3">{{item.name}}</div>
              <span class="ml-3">{{item.shuxing}}</span>
            </div>
          </m-card>

          <m-card icon="menu" title="使用技巧">
            <p class="m-0">{{model.usageTips}}</p>
          </m-card>

          <m-card icon="menu" title="对抗技巧">
            <p class="m-0">{{model.battleTips}}</p>
          </m-card>

          <m-card icon="menu" title="团战思路">
            <p class="m-0">{{model.teamTips}}</p>
          </m-card>

          <m-card icon="menu" title="英雄关系">
            <div class="bb">
              <h3>最佳搭档</h3>
              <div class="d-flex jc-betwwen mb-4" v-for="item in model.parteners" :key="(item._id)">
                <img :src="item.hero.avater" alt class="mt-2" style="height:3.6923rem" />
                <p class="m-0 ml-2">{{item.description}}</p>
              </div>
            </div>
            <div class="bb">
              <h3>被谁克制</h3>
              <div class="d-flex jc-betwwen mb-4" v-for="item in model.restraint" :key="(item._id)">
                <img :src="item.hero.avater" alt class="mt-2" style="height:3.6923rem" />
                <p class="m-0 ml-2">{{item.description}}</p>
              </div>
            </div>
            <div>
              <h3>克制谁</h3>
              <div class="d-flex jc-betwwen mb-4" v-for="item in model.enemy" :key="(item._id)">
                <img :src="item.hero.avater" alt class="mt-2" style="height:3.6923rem" />
                <p class="m-0 ml-2">{{item.description}}</p>
              </div>
            </div>
          </m-card>
        </swiperslide>

        <!-- 进阶攻略 -->
        <swiperslide ></swiperslide>
      </swiper>
    </div>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  props: {
    id: { require: true }
  },
  data() {
    return {
      currentSkillsIndex: 0,
      model: null,
      active: 0,
    };
  },
  created() {
    this.fetch();
  },
  methods: {
    async fetch() {
      //   const res = await this.$http.get(`web/api/articles/${this.id}`)
      const res = await this.$http.get(`web/api/heroes/${this.id}`);
      this.model = res.data;
      console.log(this.model);
    }
  },
  components: {
    swiper: swiper,
    swiperslide: swiperSlide
  },
  computed: {
    currentSkill() {
      return this.model.skills[this.currentSkillsIndex];
    }
  }
};
</script>

<style lang='scss'>
.page-hero {
  line-height: 2rem;
  .top {
    height: 50vw;
    background: #fff no-repeat top center;
    background-size: auto 100%;
  }
  .info {
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  }
  .badge {
    line-height: 1.3538rem;
    margin: 0.5rem 0.5rem 0 0.5rem;
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
  }
  .nav .active {
    color: #db9e3f;
    border-bottom: 2px solid #db9e3f;
  }
  .anniu {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fcfcfc;
    border: 0.5px solid #eceef0;
    height: 3.3077rem;
    width: 48%;
    i {
      margin-right: 0.5rem;
      color: #db9e3f;
      font-weight: bold;
      font-size: 1.5rem;
    }
  }
  .skills {
    .icon {
      border: 3px solid transparent;
      border-radius: 50%;
    }
    .active {
      border: 3px solid #db9e3f;
      border-radius: 50%;
    }
  }
  .equipment img {
    width: 3.5769rem;
    border-radius: 50%;
  }
}
</style>